iT邦幫忙

0

DAY 5 : 建立靜態代辦清單

  • 分享至 

  • xImage
  •  
  1. 移除預設計數器功能
    Flutter 專案預設會有一個計數器功能,包括 counter 變數與 FloatingActionButton。因為我們今天要建立的是代辦清單功能,計數器功能沒有用處,所以先把它刪掉。我們只保留 MyHomePage 的框架與 Scaffold 的基礎結構,這樣可以避免程式功能衝突,也讓後續代辦清單的介面能夠完整呈現。

方法 :
打開 lib/main.dart,找到 _counter、_incrementCounter() 以及 FloatingActionButton 部分,把它們刪 掉或註解掉,保留 Scaffold 的基本結構,這樣頁面還有 AppBar 和 body 框架

  1. 建立靜態代辦清單
    • 將 body: Center(...) 替換成 body: ListView(...)。
    • 在 ListView 中加入三個 ListTile:

  2. 建立靜態代辦清單
    接下來,我們要在主畫面中建立靜態代辦清單,這裡使用 ListView 來排版清單,並用 ListTile 來顯示每一個代辦項目。今天先建立三個固定項目:買牛奶、寫作業、運動,每個項目都是一個 ListTile,並且可以在標題中呈現文字。

  3. 在模擬器中顯示清單
    完成程式修改後,我們按下綠色的「Run」按鈕,重新編譯並在模擬器中運行程式,這時候就可以看到 Pixel 5 模擬器上出現我們剛剛建立的靜態代辦清單:買牛奶、寫作業、運動。確認每個項目都能完整呈現,並且沒有程式錯誤或閃退現象,這代表今天的基本功能已經建立完成。

https://ithelp.ithome.com.tw/upload/images/20250923/20178900TBHjucLFN2.png


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言